
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			button:hover{
				background: red;
			}
		</style>
	</head>
	<body>
		
			<button onclick="show1()">在这里</button>
			<button onclick="show2()">你好</button>
			<button onclick="show3()">可以</button>
		
		<div style="width: 500px;height: 500px; border: 3px solid red;">
			<p id="teachers" style="width: 500px;height: 30px;margin-top: px;border: solid orchid;">wwwwwwwwwww</p>
			<p id="students" style="display: none;width: 500px;height: 30px;margin-top: 200px;border: solid red;">888888888888</p>
			<p id="bor" style="display: none;width: 500px;height: 30px;margin-top: 400px;border: solid green;">4444444444</p>
		</div>
		<script type="text/javascript">
			function show1(){

        document.getElementById("teachers").style.display="block";

        document.getElementById("students").style.display="none";
        
         document.getElementById("bor").style.display="none";

    }

    function show2(){

        document.getElementById("teachers").style.display="none";

        document.getElementById("students").style.display="block";
        
         document.getElementById("bor").style.display="none";

    }
			function show3(){

        document.getElementById("teachers").style.display="none";

        document.getElementById("students").style.display="none";
        
         document.getElementById("bor").style.display="block";


    }
		
			
		</script>
	</body>
</html>
